<template>
  <div class="son">
    儿子
    <div>玩具: {{ toy }}</div>
    <div>来自父亲的车车: {{ car }}</div>
    <button @click="sendToy(toy)">送玩具给父亲</button>
    <grandson v-bind="$attrs"/>
  </div>
</template>

<script lang="ts">
  /**
   * @Author Rin_pu
   * @Date 2025/2/20 20:10
   * @Description son
   * @todo
   */
  export default {
    name: "son.vue"
  }
</script>

<script setup lang="ts">
  import {ref} from "vue";
  import grandson from "@/components/test/_9/grandson.vue";


  const toy = ref('玩具');
  defineProps<{
    car: string,
  }>()

  const emit = defineEmits<{
    sendToy: (toy: string) => void;
  }>()

  function sendToy() {
    emit('sendToy', toy.value);
  }
</script>

<style scoped>
  .son {
    background-color: lightskyblue;
    margin: auto;
    width: 80%;
    height: 90%;
  }
</style>